<template>
	<slot
		:controller="controller"
		:store="store"
		:model="model"
		:singleSelect="singleSelect"
		:actions="{
			handleExpandChange,
			handleValueChange,
			handleSelectionChange,
			handleContextMenuItemClick,
		}"
	>
		<div :class="classNames" :id="controlID" style="">
			<AppTree
				v-bind="$attrs"
				v-if="store.initTree"
				:load="load"
				:items="store.data"
				:multiple="!singleSelect"
				:expandedKeys="store.expandedKeys"
				:selectedKeys="store.selectedKeys"
				:loadedKeys="store.loadedKeys"
				:counterData="store.counterData"
				:showDefaultIcon="true"
				@expand-change="handleExpandChange"
				@value-change="handleValueChange"
				@selection-change="handleSelectionChange"
				@context-menu-item-click="handleContextMenuItemClick"
			>
				<template
					v-slot:[slotName]="{ rowData, actions }"
					v-for="slotName of slotKeys"
				>
					<slot
						:controller="controller"
						:store="store"
						:model="model"
						:name="slotName"
						:rowData="rowData"
						:actions="actions"
					>
					</slot>
				</template>
			</AppTree>
		</div>
	</slot>
</template>
<script setup lang="ts">
// 基于template/src/widgets/{{appEntities}}/{{ctrls@TREEVIEW}}-tree/{{spinalCase ctrl.codeName}}-tree-base.vue.hbs生成
import { AppTree } from '@components/widgets/tree';
import {
	useProps,
	useBasic,
	useAction,
	useController,
} from './usr-0309252920-tree-hook';
import {
	TreeActionType,
	ITreeAbility,
	ITreeStore,
	IParam,
	IViewLogicInput,
} from '@/core/interface';

// 输入参数
const props = defineProps(useProps());

// 基础数据
const {
	controlID,
	slotKeys,
	getClassNames,
	model,
	useNavParamsBind,
	useEventBind,
	handleActionClick,
	handleComponentAction,
} = useBasic(props);

const emit = defineEmits<{
	(
		event: 'ctrl-action',
		name: string,
		action: TreeActionType,
		data: IParam[]
	): void;
	(event: 'ctrl-init', name: string, data: ITreeAbility): void;
	(event: 'ctrl-destroy', name: string, data: IParam): void;
}>();

const evt = useEventBind(emit);
//  部件样式名
const classNames = computed(() => {
	return getClassNames(props);
});

//  列表部件控制器
const controller = useController(props, evt, { controlID });

useNavParamsBind(controller, props);

const store: ITreeStore = controller.getStore();

const {
	handleContextMenuItemClick,
	handleValueChange,
	handleExpandChange,
	handleSelectionChange,
} = useAction(controller);

onMounted(() => {
	controller.ctrlMounted();
});
onUnmounted(() => {
	controller.ctrlDestroy();
});
const { load } = controller.getAbility();
</script>
